<template>
  <div id="editUser">
    <el-descriptions id="userData" class="margin-top" :column="2" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            用户ID
          </div>
        </template>
        {{ editUserId }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <user />
            </el-icon>
            用户名
          </div>
        </template>
        <el-input v-model="editUserName"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Cellphone />
            </el-icon>
            联系电话
          </div>
        </template>
        <el-input v-model="editPhone"></el-input>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <tickets />
            </el-icon>
            权限等级
          </div>
        </template>
        <el-switch v-model="editAdmin" class="mb-2" />
        <div v-show="editAdmin">系统管理员</div>
        <div v-show="!editAdmin">用户</div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            注册时间
          </div>
        </template>
        {{ createTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon :style="iconStyle">
              <Timer />
            </el-icon>
            上次更新时间
          </div>
        </template>
        {{ updateTime }}
      </el-descriptions-item>
    </el-descriptions>
    <div id="buttons">
      <el-button type="primary" @click="getUserData">立即刷新</el-button>
      <el-button type="primary" @click="updateUserData">更新个人信息</el-button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { baseUrl } from "../main.js";
import { show_success_msg, show_error_msg } from "../js/msg.js";
export default {
  props: {
    editUserId: String,
  },
  data() {
    return {
      baseUrl: baseUrl,
      editUserName: "加载中...",
      editPhone: "加载中...",
      editAdmin: false,
      createTime: "加载中...",
      updateTime: "加载中...",
    };
  },
  methods: {
    getUserData() {
      axios
        .get(this.baseUrl + "/user/findById?id=" + this.editUserId)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            this.editUserName = re_data.data.name;
            this.editPhone = re_data.data.phone;
            this.editAdmin = re_data.data.admin;
            this.createTime = new Date(
              re_data.data.createTime
            ).toLocaleString();
            let updateTime = re_data.data.updateTime;
            this.updateTime =
              updateTime == null
                ? "暂无更新"
                : new Date(updateTime).toLocaleString();
          } else {
            show_error_msg("获取用户信息失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("读取失败", "与服务器通讯异常");
        });
    },
    updateUserData() {
      let fromdata = new FormData();
      fromdata.append("id", this.editUserId);
      fromdata.append("name", this.editUserName);
      fromdata.append("phone", this.editPhone);
      axios
        .post(this.baseUrl + "/user/updateUserInfo", fromdata)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            show_success_msg("更新用户信息成功", "");
            this.updateUserAdmin();
            this.getUserData();
          } else {
            show_error_msg("更新用户信息失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("更新失败", "与服务器通讯异常");
        });
    },
    updateUserAdmin() {
      let fromdata = new FormData();
      fromdata.append("id", this.editUserId);
      fromdata.append("admin", this.editAdmin);
      axios
        .post(this.baseUrl + "/user/updateUserAdmin", fromdata)
        .then((response) => {
          let re_data = response.data;
          if (re_data.status == 200) {
            show_success_msg("更新用户权限成功", "");
          } else {
            show_error_msg("更新用户权限失败", re_data.msg);
          }
        })
        .catch((error) => {
          show_error_msg("更新用户权限失败", "与服务器通讯异常");
        });
    },
  },
  mounted() {
    this.getUserData();
  },
};
</script>

<style scoped>
#editUser > #userData {
  margin-top: 12px;
}

#buttons {
  margin-top: 2vh;
}
</style>